<template>
  <div class="root">
    <el-form id="account" method="post" label-width="40%">
      <el-form-item label="用户名">
        <el-input v-model="Input.UserName" class="form-control"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="Input.Password" class="form-control" type="password"/>
      </el-form-item>
      <el-form-item>
        <el-button @click="onLogin">Log in</el-button>
      </el-form-item>
    </el-form>
    <div v-text="token"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Input: {
        UserName: '',
        Password: ''
      }
    }
  },
  computed: {
    token() {
      return this.$store.state.login.token
    }
  },
  methods: {
    onLogin() {
      console.log(this.Input)
      this.$store.commit('login/login', this.Input)
    }
  }
}
</script>
<style lang="scss" scoped>
div.root {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10%;

  form {
    width: 200px;
    // min-width: 30%;
  }
  .ymca {
    @include center; // will be resolved as position:absolute....
    color: $gray; // will be resolved to #333
  }
}
</style> 